<template>
  <div class="main">
    <img class="logo" src="../assets/images/LIECHEBAO.png" alt="" />
    <div style="width: 100vw; height: 100vh" class="df aic jcc">
      <div class="main_content">
        <img class="main_content_img" src="../assets/images/log_on/bg_web_carAI1.png" alt="" />
        <div class="content">
          <img class="title" src="../assets/images/headline.png" alt="" />
          <div class="df mb10" style="color: #116cf8; font-weight: bold">
            密码登录
          </div>
          <div class="mb20" style="border-bottom: 0.0625rem solid rgba(17, 108, 248, 0.6)"></div>
          <el-form :rules="rules" :model="account" ref="loginRef">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input v-model="account.username" @blur="checkAccount" placeholder="请输入账号" @input="changeAccount">
                <template #prefix>
                  <el-icon size="large">
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input v-model="account.password" placeholder="输入密码" show-password @input="changePassword">
                <template #prefix>
                  <el-icon size="large">
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="ValidateCode">
              <div style="width: 100%" class="df aic jcsb">
                <el-input v-model="account.ValidateCode" placeholder="请输入验证码" style="width: 60%"
                  @keydown.enter="bindLogin(loginRef)">
                  <template #prefix>
                    <el-icon size="large">
                      <Reading />
                    </el-icon>
                  </template>
                </el-input>
                <img style="height: 3rem; width: 38%; border-radius: 0.25rem" @click="refreshCode" :src="baseImg" />
              </div>
            </el-form-item>
            <el-form-item>
              <div class="df aic">
                <el-checkbox v-model="consentAgreement" size="small" @keydown.enter="bindLogin(loginRef)"></el-checkbox>
                <div style="
                    font-size: 12px;
                    color: #c0c0c0;
                    user-select: none;
                    cursor: pointer;
                    line-height: 16px;
                  ">
                  &nbsp; <span @click="consentAgreement = !consentAgreement">我已阅读并同意</span><span style="color: #116cf8"
                    @click="downloadContract">《劣车宝服务平台用户服务协议》</span>
                  和<span style="color: #116cf8" @click="privacyPolicy">《劣车宝服务平台隐私政策》</span>
                </div>
              </div>
            </el-form-item>
            <!-- 登录 -->
            <el-form-item>
              <el-button type="primary" @click="bindLogin(loginRef)" :loading="flag">登录</el-button>
            </el-form-item>
            <!-- 记住密码  -->
            <el-form-item prop="remmberPsw">
              <div style="width: 100%" class="df jcsb aic">
                <el-checkbox size="small" v-model="account.remmberPsw" label="记住密码"></el-checkbox>
                <div style="white-space: nowrap; font-size: 12px">
                  <a style="color: #116cf8" href="#" @click="centerDialogVisible = true">忘记密码?</a>
                  <span style="font-size: 12px; color: #b2b2b2">&nbsp;|&nbsp;</span>
                  <a style="color: #000; white-space: nowrap" href="#"
                    @click="companyRegistrationcenterDialogVisible = true">公司注册</a>
                </div>
              </div>
            </el-form-item>
          </el-form>
          <!-------------------------------------- 忘记密码 -------------------------------------->
          <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" align-center
            @close="closeCenterDialogVisible">
            <div style="
                width: 100%;
                padding: 3.75rem 1.25rem 5rem 1.25rem;
                position: relative;
              ">
              <el-icon style="position: absolute; top: -1rem; right: 0" size="18" @click="backLogin">
                <CloseBold />
              </el-icon>
              <!-- 步骤条 -->
              <el-steps :active="steps" align-center size="small">
                <el-step title="验证手机号" />
                <el-step title="重置登录密码" />
                <el-step title="重置成功" />
              </el-steps>
              <div class="df fdc aic jcc" style="margin-top: 2.5rem" v-if="steps == 1">
                <el-form :rules="phoneRules" :model="phoneCheck" ref="phoneRef" style="width: 50%" size="small">
                  <el-form-item prop="phone">
                    <el-input v-model="phoneCheck.phone" placeholder="输入手机号">
                      <template #prefix>
                        <el-icon size="large">
                          <Iphone />
                        </el-icon>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="code">
                    <el-input v-model="phoneCheck.code" placeholder="输入验证码">
                      <template #prefix>
                        <el-icon size="large">
                          <DataAnalysis />
                        </el-icon>
                      </template>

                      <template #suffix>
                        <span style="
                            color: #116cf8;
                            cursor: pointer;
                            user-select: none;
                          " @click="getValidatedCode" v-if="getCodeFlag == false">获取验证码</span>
                        <span style="
                            color: #116cf8;
                            cursor: pointer;
                            user-select: none;
                          " v-else>{{ seconds }}s后重新获取</span>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="forgetNext(phoneRef)">下一步</el-button>
                  </el-form-item>
                </el-form>
                <div @click="backLogin" style="
                    font-size: 0.75rem;
                    color: #b2b2b2;
                    cursor: pointer;
                    user-select: none;
                  ">
                  无需找回？<span style="color: #116cf8">立即登录</span>
                </div>
              </div>
              <div class="df fdc aic jcc" style="margin-top: 2.5rem" v-if="steps == 2">
                <el-form :rules="passRules" :model="setPassWord" ref="passRef" style="width: 50%" size="small">
                  <el-form-item prop="oldPassWord">
                    <el-input v-model="setPassWord.oldPassWord" placeholder="请输入新密码">
                      <template #prefix>
                        <el-icon size="large">
                          <Lock />
                        </el-icon>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="recPassWord">
                    <el-input v-model="setPassWord.recPassWord" placeholder="请再次确认新密码">
                      <template #prefix>
                        <el-icon size="large">
                          <Lock />
                        </el-icon>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="savePassBtn(passRef)">下一步</el-button>
                  </el-form-item>
                </el-form>
                <div @click="backLogin" style="
                    font-size: 0.75rem;
                    color: #b2b2b2;
                    cursor: pointer;
                    user-select: none;
                  ">
                  无需找回？<span style="color: #116cf8">立即登录</span>
                </div>
              </div>
              <div class="df fdc aic jcc" style="margin-top: 2.5rem" v-if="steps == 3">
                <img src="../assets/images/check-circle.png" alt="" />
                <span class="passTips">新密码设置成功，请重新登录</span>
                <el-form style="width: 50%" size="small">
                  <el-form-item>
                    <el-button type="primary" @click="backLogin">返回登录</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-dialog>
          <!-------------------------------------- 公司注册 -------------------------------------->
          <el-dialog v-model="companyRegistrationcenterDialogVisible" :show-close="false" width="600" align-center>
            <el-form ref="ruleFormRef" :rules="rules1" :model="formData" label-width="120" class="df fdc aic"
              label-position="top">
              <div style="width: 60%" class="df fdc">
                <el-form-item label="公司名称" style="width: 100%" prop="companyName">
                  <el-input v-model="formData.companyName" placeholder="公司名称" />
                </el-form-item>
                <el-form-item label="公司性质" style="width: 100%" prop="type">
                  <el-select v-model="formData.type" placeholder="公司性质">
                    <!-- 启用---N     停用---D -->
                    <el-option label="拆解厂" value="0" />
                    <el-option label="拖车" value="1" />
                  </el-select>
                </el-form-item>
                <el-form-item label="负责人姓名" style="width: 100%" prop="principalName">
                  <el-input v-model="formData.principalName" placeholder="输入负责人姓名" />
                </el-form-item>
                <el-form-item label="负责人电话" style="width: 100%" prop="principalPhone">
                  <div style="width: 100%" class="pr">
                    <el-input v-model="formData.principalPhone" placeholder="输入负责人电话" @input="principalPhoneChange" />
                    <span v-if="principalPhoneFlag" class="pa principalPhone">请填写负责人手机号</span>
                  </div>
                </el-form-item>
                <el-form-item label="验证码" style="width: 100%" prop="code">
                  <el-input v-model="formData.code" placeholder="输入验证码">
                    <template #suffix>
                      <span style="
                          color: #116cf8;
                          cursor: pointer;
                          user-select: none;
                        " @click="CodeCompanyRegistration" v-if="companygetCodeFlag == false">获取验证码</span>
                      <span style="
                          color: #116cf8;
                          cursor: pointer;
                          user-select: none;
                        " v-else>{{ companySeconds }}s后重新获取</span>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="formData.remmberPsw"></el-checkbox>
                  <p v-if="formData.type == 0" class="ml10" style="
                      user-select: none;
                      cursor: pointer;
                      line-height: 16px;
                      font-size: 12px;
                      color: #cacaca;
                    ">
                    我已阅读并同意<span style="color: #116cf8" @click="downloadContract">《劣车宝服务平台用户服务协议》</span>和<span
                      style="color: #116cf8" @click="privacyPolicy">《劣车宝服务平台隐私政策》</span>
                  </p>
                  <p v-if="formData.type == 1" class="ml10" style="
                      user-select: none;
                      cursor: pointer;
                      line-height: 16px;
                      font-size: 12px;
                      color: #cacaca;
                    ">
                    我已阅读并同意<span style="color: #116cf8" @click="trialDownloadContract">《劣车宝服务平台用户服务协议》</span>和<span
                      style="color: #116cf8" @click="trialPrivacyPolicy">《劣车宝服务平台隐私政策》</span>
                  </p>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="registerBtn(ruleFormRef)">注册</el-button>
                </el-form-item>
                <el-form-item>
                  <div style="width: 100%" class="df jcc">
                    <p style="
                        font-size: 12px;
                        color: #cacaca;
                        user-select: none;
                        cursor: pointer;
                      ">
                      已有帐号？<span style="color: #116cf8"
                        @click="companyRegistrationcenterDialogVisible = false">立即登录</span>
                    </p>
                  </div>
                </el-form-item>
              </div>
            </el-form>
          </el-dialog>
          <!-------------------------------------- 消息通知 -------------------------------------->
          <el-dialog v-model="messageNotificationDialog" title="通知" :show-close="false" width="820" align-center
            :close-on-click-modal="false">
            <hr class="mb20" />
            <el-tabs tab-position="left" style="height:auto" class="demo-tabs" size="small">
              <el-tab-pane v-for="item in notificationList" :key="item.id" :label="item.title">
                <div style="font-size: 12px;text-align: left;position: relative;">
                  <p style="text-align: center;font-weight: bold;">{{ item.title }}</p>
                  <p style="text-align: right;"><span style="font-weight: bold;">版本号：</span>{{ item.versionNumber }}
                  </p>
                  <p style="text-align: right;margin-bottom: 10px;"><span style="font-weight: bold;">生效时间：</span>{{
                    item.effectiveDate }}
                  </p>
                  <p class="mb10" style="height: 300px;overflow-y: auto;" v-html="item.content"></p>
                  <div style="height:30px"></div>
                  <div style="position: absolute;bottom: 0;right: 0;">
                    <p style="text-align: right;font-weight: bold;">四川劣车宝科技有限公司</p>
                    <p style="text-align: right;"><span style="font-weight: bold;">更新时间：</span>{{ item.updatedAt }}</p>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <hr class="mt20" />
            <div class="df" style="width:100%;justify-content: end;">
              <el-button type="primary" @click="messageNotification" style="width: 100px;">确定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MD5 } from "crypto-js";
import { ref, onMounted } from "vue";
// import pdf from 'vue3-pdf'
import {
  User,
  Lock,
  Reading,
  Iphone,
  DataAnalysis,
} from "@element-plus/icons-vue";
import { CloseBold } from "@element-plus/icons-vue";
import {
  RequestCompaniesSave,
  RequestLOGIN,
  RequestEmployeeGetfunctionTree,
  RequestGetValidateCodeImage,
  RequestCompaniesNode,
  RequestAgreementGetAgreementUseLocation,
  RequestLoginAccountGetValidatedCode,
  RequestLoginAccountValidateOldMobile,
  RequestLoginAccountForgetPassword,
  RequestCheckNotice,
  RequestNotificationList
} from "../api/path/index.js";
import { formatTimeAll, formatTimeHan } from "@/filters/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { transformEmojiValueToKey } from "@/TUIKit/components/TUIChat/utils/emojiList";
const router = useRouter();
const consentAgreement = ref<any>(false);
/* 选项卡 */

// 验证码
let baseImg = ref<any>("");
const getCode = async () => {
  let res = await RequestGetValidateCodeImage();
  baseImg.value = res;
};
const activeName = ref("first");
getCode();
// 刷新验证码
const refreshCode = () => {
  getCode();
};
const downloadContract = () => {
  RequestAgreementGetAgreementUseLocation(
    "（PC端）劣车宝服务平台用户服务协议"
  ).then((res: any) => {
    if (res.success == true) {
      res.resultObj.forEach((item: any) => {
        const routerResolve = router.resolve(`/PDF_preview?file=` + item);
        window.open(routerResolve.href, "_blank");
      });
    }
  });
};
const privacyPolicy = () => {
  RequestAgreementGetAgreementUseLocation(
    "（PC端）劣车宝服务平台隐私政策"
  ).then((res: any) => {
    if (res.success == true) {
      res.resultObj.forEach((item: any) => {
        const routerResolve = router.resolve(`/PDF_preview?file=` + item);
        window.open(routerResolve.href, "_blank");
      });
    }
  });
};
const trialDownloadContract = () => {
  RequestAgreementGetAgreementUseLocation(
    "（拖车小程序）劣车宝拖车小程序用户服务协议"
  ).then((res: any) => {
    if (res.success == true) {
      res.resultObj.forEach((item: any) => {
        const routerResolve = router.resolve(`/PDF_preview?file=` + item);
        window.open(routerResolve.href, "_blank");
      });
    }
  });
};
const trialPrivacyPolicy = () => {
  RequestAgreementGetAgreementUseLocation(
    "（拖车小程序）劣车宝拖车小程序隐私政策"
  ).then((res: any) => {
    if (res.success == true) {
      res.resultObj.forEach((item: any) => {
        const routerResolve = router.resolve(`/PDF_preview?file=` + item);
        window.open(routerResolve.href, "_blank");
      });
    }
  });
};
/* ##################################### 登录接口 #####################################*/
//记住密码
const onRemmberPassword = () => {
  if (account.value.remmberPsw) {
    console.log("afe", account);
    localStorage.setItem(
      "USER_INFO",
      JSON.stringify({
        username: account.value.username,
        password: MD5(account.value.password).toString(),
        remmberPsw: true,
      })
    );
  } else {
    localStorage.removeItem("USER_INFO");
  }
};
// 用户账号信息回显
const showUserInfo = () => {
  const userInfo = JSON.parse(localStorage.getItem("USER_INFO")!);
  if (userInfo) {
    console.log(userInfo);
    account.value.username = userInfo.username;
    account.value.password = userInfo.password;
    account.value.remmberPsw = userInfo.remmberPsw;
  }
};
// 登录表单账户数据
const account = ref({
  username: "",
  password: "",
  remmberPsw: false, // 记住密码
  ValidateCode: "", //验证码
});
showUserInfo();

// 表单验证规则
const rules = ref({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  ValidateCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});
// 表单对象
const loginRef = ref(null);
// 判断账号是否和上次登录的账号一致
const checkAccount = () => {
  const userInfo = JSON.parse(localStorage.getItem("USER_INFO")!);
  if (userInfo.username != account.value.username) {
    localStorage.clear();
  }
};
// 登录表单提交事件
const companyStatus = ref(); //根据公司激活状态判断去那个页面  为  4  就是去公司管理页面
const flag = ref<boolean>(false);
const messageNotificationDialog = ref<any>(false)  //消息通知弹窗
const notificationList = ref<any>(false)
//消息通知弹窗确认按钮
const messageNotification = () => {
  messageNotificationDialog.value = false
  if (companyStatus.value == 4) {
    location.href = "/Authority";
    localStorage.setItem("isShop", "false");
  } else {
    location.href = "/WelcomePage";
    localStorage.setItem("isShop", "false");
  }
}
const bindLogin = async (formEl: any | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (consentAgreement.value == true) {
        flag.value = true;
        if (!localStorage.hasOwnProperty("USER_INFO")) {
          const formAccount = new FormData();
          formAccount.append("account", account.value.username);
          formAccount.append(
            "password",
            MD5(account.value.password).toString()
          );
          formAccount.append("validateCode", account.value.ValidateCode);
          RequestLOGIN(formAccount).then((res: any) => {
            if (res.code == 0) {
              ElMessage.success(res.msg);
              localStorage.setItem("TOKEN", res.resultObj.token);
              localStorage.setItem("roleInfo", JSON.stringify(res.resultObj));
              localStorage.setItem(
                "ShopId",
                JSON.stringify(res.resultObj.shopId)
              );
              RequestCompaniesNode(res.resultObj.company).then((val: any) => {
                companyStatus.value = val.resultObj[0].status;
              });
              RequestEmployeeGetfunctionTree(res.resultObj).then(
                (ress: any) => {
                  console.log(ress);
                  if (ress.code == 0) {
                    flag.value = false;
                    localStorage.setItem(
                      "roleRoutes",
                      JSON.stringify(ress.resultObj[0].children)
                    );
                    onRemmberPassword(); //记住密码
                    if (res.resultObj.company != 0) {
                      RequestCheckNotice().then((val: any) => {
                        if (val.resultObj == true) {
                          messageNotificationDialog.value = true
                          RequestNotificationList().then((vall: any) => {
                            vall.resultObj.forEach((element: any) => {
                              element.effectiveDate = formatTimeAll(element.effectiveDate)
                              element.updatedAt = formatTimeAll(element.updatedAt)
                            });
                            notificationList.value = vall.resultObj
                          })
                        } else {
                          if (companyStatus.value == 4) {
                            location.href = "/Authority";
                            localStorage.setItem("isShop", "false");
                          } else {
                            location.href = "/WelcomePage";
                            localStorage.setItem("isShop", "false");
                          }
                        }
                      })
                    } else {
                      if (companyStatus.value == 4) {
                        location.href = "/Authority";
                        localStorage.setItem("isShop", "false");
                      } else {
                        location.href = "/WelcomePage";
                        localStorage.setItem("isShop", "false");
                      }
                    }
                  }
                }
              );
            } else {
              flag.value = false;
              ElMessage.error(res.msg);
            }
          });
        } else {
          const formAccount = new FormData();
          formAccount.append("account", account.value.username);
          formAccount.append("password", account.value.password);
          formAccount.append("validateCode", account.value.ValidateCode);
          RequestLOGIN(formAccount).then((res: any) => {
            if (res.code == 0) {
              ElMessage.success(res.msg);
              localStorage.setItem("TOKEN", res.resultObj.token);
              localStorage.setItem("roleInfo", JSON.stringify(res.resultObj));
              localStorage.setItem(
                "ShopId",
                JSON.stringify(res.resultObj.shopId)
              );
              RequestEmployeeGetfunctionTree(res.resultObj).then(
                (ress: any) => {
                  console.log(ress);
                  if (ress.code == 0) {
                    flag.value = false;
                    localStorage.setItem(
                      "roleRoutes",
                      JSON.stringify(ress.resultObj[0].children)
                    );
                    if (res.resultObj.company != 0) {
                      RequestCheckNotice().then((val: any) => {
                        if (val.resultObj == true) {
                          messageNotificationDialog.value = true
                          RequestNotificationList().then((vall: any) => {
                            vall.resultObj.forEach((element: any) => {
                              element.effectiveDate = formatTimeAll(element.effectiveDate)
                              element.updatedAt = formatTimeAll(element.updatedAt)
                            });
                            notificationList.value = vall.resultObj
                          })
                        } else {
                          if (companyStatus.value == 4) {
                            location.href = "/Authority";
                            localStorage.setItem("isShop", "false");
                          } else {
                            location.href = "/WelcomePage";
                            localStorage.setItem("isShop", "false");
                          }
                        }
                      })
                    } else {
                      if (companyStatus.value == 4) {
                        location.href = "/Authority";
                        localStorage.setItem("isShop", "false");
                      } else {
                        location.href = "/WelcomePage";
                        localStorage.setItem("isShop", "false");
                      }
                    }
                  }
                }
              );
            } else {
              flag.value = false;
              ElMessage.error(res.msg);
            }
          });
        }
      } else {
        ElMessage.error("请阅读并勾选劣车宝服务协议和隐私政策");
      }
    } else {
      console.log("与这个无关====>>>>校验", fields);
    }
  });
};
const changeAccount = () => {
  account.value.password = "";
  account.value.ValidateCode = "";
  localStorage.clear();
};
const changePassword = () => {
  localStorage.clear();
};

/**************************** 忘记密码 ****************************/
const centerDialogVisible = ref<any>(false);
const steps = ref<any>(1);
const seconds = ref<any>(60);
const getCodeFlag = ref<any>(false);
const phoneCheck = ref<any>({
  phone: "",
  code: "",
});
const setPassWord = ref<any>({
  oldPassWord: "",
  recPassWord: "",
});
const phoneRules = ref({
  phone: [
    { required: true, message: "请输入电话", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});
const phoneRef = ref(null);
const passRules = ref({
  oldPassWord: [{ required: true, message: "请输入新密码", trigger: "blur" }],
  recPassWord: [{ required: true, message: "请确认新密码", trigger: "blur" }],
});
const passRef = ref(null);
// 获取验证码
const getValidatedCode = () => {
  if (/^1[3456789]\d{9}$/.test(phoneCheck.value.phone)) {
    RequestLoginAccountGetValidatedCode(phoneCheck.value.phone).then(
      (res: any) => {
        if (res.success == true) {
          getCodeFlag.value = true;
          ElMessage.success("验证码已发送至手机，请注意查收");
          let timeOut = setInterval(() => {
            seconds.value--;
            if (seconds.value <= 0) {
              clearInterval(timeOut);
              seconds.value = 60;
              getCodeFlag.value = false;
            }
          }, 1000);
        } else {
          ElMessage.error(res.msg);
        }
      }
    );
  } else {
    ElMessage.error("请输入正确的手机号");
  }
};
// 下一步---验证手机号
const forgetNext = async (formEl: any | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      let checkPhone = new FormData();
      checkPhone.append("oldMobile", phoneCheck.value.phone);
      checkPhone.append("validateCode", phoneCheck.value.code);
      RequestLoginAccountValidateOldMobile(checkPhone).then((res: any) => {
        if (res.success == true) {
          steps.value = 2;
          ElMessage.success(res.msg);
        } else {
          ElMessage.error("请输入正确的验证码");
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 保存密码
const savePassBtn = async (formEl: any | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (setPassWord.value.recPassWord == setPassWord.value.oldPassWord) {
        let savePass = new FormData();
        savePass.append("validateCode", phoneCheck.value.code);
        savePass.append("mobile", phoneCheck.value.phone);
        savePass.append(
          "newPassword",
          MD5(setPassWord.value.recPassWord).toString()
        );
        RequestLoginAccountForgetPassword(savePass).then((res: any) => {
          if (res.success == true) {
            ElMessage.success(res.msg);
            steps.value = 3;
          }
        });
      } else {
        ElMessage.error("请确保两次输入的密码一致");
      }
    } else {
      console.log("error submit!", fields);
    }
  });
  // let savePass = new FormData()
  // savePass.append('validateCode', phoneCheck.value.code)
  // savePass.append('mobile', phoneCheck.value.phone)
  // savePass.append('newPassword', MD5(setPassWord.value.recPassWord).toString())
  // RequestLoginAccountForgetPassword(savePass).then((res: any) => {
  //     if (res.success == true) {
  //         ElMessage.success(res.msg)
  //         steps.value = 3
  //     }
  // })
};
// 返回登陆
const backLogin = () => {
  phoneCheck.value.phone = "";
  phoneCheck.value.code = "";
  setPassWord.value.oldPassWord = "";
  setPassWord.value.recPassWord = "";
  centerDialogVisible.value = false;
  steps.value = 1;
};

/**************************** 公司注册 ****************************/
const ruleFormRef = ref<any>();
const rules1 = ref<any>({
  companyName: [{ required: true, message: "请填写公司名称", trigger: "blur" }],
  principalName: [
    { required: true, message: "请填写负责人姓名", trigger: "blur" },
    {
      pattern:
        /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/,
      message: "请输入正确的负责人姓名",
      trigger: "blur",
    },
  ],
  principalPhone: [
    { required: true, message: "请填写负责人手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  code: [{ required: true, message: "请输入验证码", trigger: "change" }],
  type: [{ required: true, message: "请输入验证码" }],
});
const companyRegistrationcenterDialogVisible = ref<any>(false);
const formData = ref<any>({
  companyNAme: "",
  type: "0",
  principalName: "",
  principalPhone: "",
  code: "",
  remmberPsw: false,
});
// 获取验证码
const companygetCodeFlag = ref<any>(false);
const companySeconds = ref<any>(60);
const principalPhoneFlag = ref<any>(false);
const principalPhoneChange = () => {
  principalPhoneFlag.value = false;
};
const CodeCompanyRegistration = () => {
  if (formData.value.principalPhone == "") {
    principalPhoneFlag.value = true;
  } else {
    if (/^1[3456789]\d{9}$/.test(formData.value.principalPhone)) {
      RequestLoginAccountGetValidatedCode(formData.value.principalPhone).then(
        (res: any) => {
          if (res.success == true) {
            companygetCodeFlag.value = true;
            ElMessage.success("验证码已发送至手机，请注意查收");
            let timeOut = setInterval(() => {
              companySeconds.value--;
              if (companySeconds.value <= 0) {
                clearInterval(timeOut);
                companySeconds.value = 60;
                companygetCodeFlag.value = false;
              }
            }, 1000);
          } else {
            ElMessage.error(res.msg);
          }
        }
      );
    }
  }
};
const closeCenterDialogVisible = () => {
  // companySeconds.value = 60;
  // companygetCodeFlag.value = false;
  // steps.value = 1;
}
// 注册
const registerBtn = async (formEl: any | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (formData.value.remmberPsw == true) {
        principalPhoneFlag.value = false;
        let checkPhone = new FormData();
        checkPhone.append("oldMobile", formData.value.principalPhone);
        checkPhone.append("validateCode", formData.value.code);
        RequestLoginAccountValidateOldMobile(checkPhone).then((res: any) => {
          if (res.success == true) {
            RequestCompaniesSave({
              companyName: formData.value.companyName,
              principalName: formData.value.principalName,
              principalPhone: formData.value.principalPhone,
              type: formData.value.type,
            }).then((res: any) => {
              if (res.code == 0) {
                companyRegistrationcenterDialogVisible.value = false;
                account.value.username = formData.value.principalPhone;
                ElMessageBox.alert(
                  `您的账号已注册成功，用户名是：${formData.value.principalPhone}，初始密码：123456，请尽快登录平台修改密码并完善企业信息`,
                  "注册成功",
                  {
                    confirmButtonText: "我已记住密码",
                  }
                );
                //其它处理代码
              } else {
                ElMessage.error(res.msg);
              }
            });
          } else {
            ElMessage.error("请输入正确的验证码");
          }
        });
      } else {
        ElMessage.error("请阅读并同意协议");
      }
    } else {
      principalPhoneFlag.value = false;
      console.log("error submit!", fields);
    }
  });
};
// 屏幕宽度
const windowWidth = ref(0);
// 屏幕高度
const windowHeight = ref(0);
const width = ref<any>();
const height = ref<any>();
const heightBody = ref<any>();
// 生命周期
onMounted(() => {
  getWindowResize();
  window.addEventListener("resize", getWindowResize);
});
// 获取屏幕尺寸
const getWindowResize = function () {
  windowWidth.value = window.innerWidth;
  windowHeight.value = window.innerHeight;
  console.log("width", windowWidth.value);
  console.log("height", windowHeight.value);
  if (windowHeight.value <= 851) {
    height.value = "31.9119rem";
    // heightBody.value = '30.3rem'
  } else {
    height.value = "60%";
    // heightBody.value = '60%'
  }
  if (windowWidth.value <= 1200) {
    width.value = "45rem";
  } else {
    width.value = "60%";
  }
};
</script>

<style scoped lang="scss">
@import '@/assets/css/media.scss';

.main {
  width: 100vw;
  height: 100vh;
  background: url(../assets/images/log_on/bg_web_bottom.png) no-repeat center center;
  background-size: cover;

  .logo {
    width: 10.875rem;
    height: 4rem;
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;

    @include responseTo('phone') {
      top: 0;
      left: 0;
    }
  }

  .main_content {
    width: v-bind(width);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .main_content_img {
      width: 66%;
      height: v-bind(height);
      display: flex;
      align-items: start;
      justify-content: start;

      @include responseTo('phone') {
        display: none;
      }
    }

    .content {
      background-color: rgba(255, 255, 255);
      padding: 3.125rem 1.875rem 1.875rem;
      width: 34%;
      height: v-bind(height);
      text-align: center;

      @include responseTo('phone') {
        width: 100vw;
      }

      .title {
        width: 90%;
        margin-bottom: 1.875rem;
      }

      .el-input,
      .el-button {
        width: 100%;
        height: 3rem;
      }

      .el-input__wrapper {
        background-color: #f4f4f4;
      }
    }
  }
}

::v-deep .el-dialog {

  .el-input,
  .el-button {
    width: 100%;
    height: 2rem !important;
  }

  .el-step__title {
    font-size: 0.75rem;
    margin-top: 0rem;
  }

  .el-step__icon.is-text {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.75rem;
  }

  .passTips {
    font-size: 0.75rem;
    font-weight: 400;
    color: #b2b2b2;
    margin: 0.25rem 0 0.625rem;
  }

  .el-input__wrapper {
    background-color: #fff !important;
  }
}

::v-deep .el-tabs__item.is-active {
  color: #116cf8;
}

::v-deep .el-tabs__active-bar {
  background-color: #116cf8;
}

::v-deep .el-tabs__item:hover {
  color: #116cf8;
}

.el-button--primary,
.el-button--primary:active {
  background: #116cf8;
  border: none;
  color: #fff;
}

::v-deep .el-form {
  margin-top: 0.625rem;
}

.el-button--primary:hover,
.el-button--primary:focus {
  background: #3987fc;
  border: none;
  color: #fff;
}

.el-button--primary.is-link {
  background-color: rgba($color: #000000, $alpha: 0);
  // color: v-bind(btnColor);
}

.el-button--primary.is-link:hover,
.el-button--primary.is-link:focus {
  background-color: rgba($color: #000000, $alpha: 0);
  color: #0a1833;
}

::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #116cf8;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #116cf8;
  border-color: #116cf8;
}

.principalPhone {
  font-size: 12px;
  color: #f56c6c;
  top: 26px;
  left: 0;
  // transition:200ms;
}
</style>
